Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Navigation Block: Fix issue with double-clicking "Create a new menu" causing duplicate menus. #67488

Merged
merged 1 commit into from
Dec 3, 2024
Merged

Navigation Block: Fix issue with double-clicking "Create a new menu" causing duplicate menus. #67488

merged 1 commit into from
Dec 3, 2024

Conversation

creador-dev
Copy link
Contributor

@creador-dev creador-dev commented Dec 2, 2024 •
edited by talldan
Loading

Fixes #56248

What?

This PR addresses an issue where users could accidentally create two navigation menus by double-clicking the "Create a new menu" button in an empty block.

Why?

#56248

How?

The DeletedNavigationWarning component has been updated:

  • Added a useState hook to manage the disabled state of the button.
  • Updated the button to disable immediately after the first click.
  • Included the accessibleWhenDisabled prop to ensure the button remains accessible when disabled.

Testing Instructions

  1. Open the Editor (Post/Page editor or Site Editor) in WordPress.
  2. Insert a Navigation Block into your content.
  3. Delete the Navigation Custom Post Type (CPT) that the block is using.
    • This can typically be done by navigating to the Appearance > Navigation section and deleting the menu associated with the block.
  4. Return to the editor, and observe that the "Create a new menu" prompt appears within the Navigation block.
  5. Quickly double-click the "Create a new menu" button.
  6. Verify that:
    • The button becomes disabled after the first click.
    • Only one navigation menu is created in the Appearance > Navigation section.
    • No duplicate menus are created, even with rapid double-clicking.

Testing Instructions for Keyboard

  1. Follow the steps above using only the keyboard:
    • Navigate to the "Create a new menu" button using the Tab key.
    • Press Enter or Space to activate the button.
  2. Confirm that the button disables after the first activation.
  3. Verify that no duplicate menus are created when the button is activated repeatedly using the keyboard.

Interacted Accounts

The following accounts have interacted with this PR and/or linked issues:

@github-actions github-actions bot added the First-time Contributor Pull request opened by a first-time contributor to Gutenberg repository label Dec 2, 2024
@github-actions GitHub Actions
Copy link

github-actions bot commented Dec 2, 2024

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @creador-dev! In case you missed it, we'd love to have you join us in our Slack community.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

@creador-dev creador-dev marked this pull request as ready for review December 2, 2024 16:35
@github-actions GitHub Actions
Copy link

github-actions bot commented Dec 2, 2024

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: creador-dev <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

@talldan talldan added [Type] Bug An existing feature does not function as intended [Block] Navigation Affects the Navigation Block labels Dec 3, 2024
talldan
talldan approved these changes Dec 3, 2024
View reviewed changes
Copy link
Contributor

@talldan talldan left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This works well for me, thanks for contributing, and congrats on your first Gutenberg code contribution 🎉

packages/block-library/src/navigation/edit/deleted-navigation-warning.js
Comment on lines +12 to +15
const handleButtonClick = () => {
setIsButtonDisabled( true );
onCreateNew();
};
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think I would personally choose to inline this function and as a nicety also pass the arguments through to onCreateNew, as this changes the type/signature of the prop.

It still works fine though, so these changes aren't strictly needed, I leave it as some thoughtful feedback. 😄

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@talldan Thank you so much for your feedback! I really appreciate your insight and will definitely keep this in mind for the future.

@talldan talldan merged commit 680fef5 into WordPress:trunk Dec 3, 2024
69 of 72 checks passed
@talldan talldan changed the title Fixes issue with double-clicking "Create a new menu" causing duplicate menus. Navigation Block: Fix issue with double-clicking "Create a new menu" causing duplicate menus. Dec 3, 2024
@github-actions github-actions bot added this to the Gutenberg 19.9 milestone Dec 3, 2024
im3dabasia pushed a commit to im3dabasia/gutenberg that referenced this pull request Dec 4, 2024
@creador-dev @talldan @im3dabasia
Navigation Block: Fix issue with double-clicking "Create a new menu" …
c6a6e57 
…causing duplicate menus. (WordPress#67488)

Co-authored-by: creador-dev <[email protected]>
Co-authored-by: talldan <[email protected]>
michalczaplinski pushed a commit that referenced this pull request Dec 5, 2024
@creador-dev @talldan @michalczaplinski
Navigation Block: Fix issue with double-clicking "Create a new menu" …
fe8c989 
…causing duplicate menus. (#67488)

Co-authored-by: creador-dev <[email protected]>
Co-authored-by: talldan <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@talldan talldan talldan approved these changes

@ajitbohra ajitbohra Awaiting requested review from ajitbohra ajitbohra is a code owner

Assignees
No one assigned
Labels
[Block] Navigation Affects the Navigation Block First-time Contributor Pull request opened by a first-time contributor to Gutenberg repository [Type] Bug An existing feature does not function as intended
Projects
None yet
Milestone
Gutenberg 19.9
Development

Successfully merging this pull request may close these issues.

Navigation: Possible to create two navigations by mistake
2 participants
@creador-dev @talldan